<template>
  <a-select
    :value="value"
    :placeholder="t('请选择')"
    :allow-clear="allowClear"
    :size="size"
    :disabled="disabled"
    :dropdown-match-select-width="false"
    style="width: 100%; text-align: left"
    @update:value="(v) => emit('update:value', v)"
  >
    <a-select-option
      v-for="item in options"
      :key="item.value"
      :value="item.value"
    >
      <span>{{ isFunction(item.label) ? item.label() : item.label }}</span>
      <span style="float: right; margin-left: 16px; color: #999999">
        {{ item.value }}
      </span>
    </a-select-option>
  </a-select>
</template>
<script lang="ts" setup>
import { isFunction } from "lodash";
import { reactive } from "vue";
import { useI18n } from "vue-i18n";
import type { SelectProps } from "ant-design-vue";
import type { SelectOptions } from "../../typing";

interface Props {
  /**绑定值 */
  value: string;
  /**禁用 */
  disabled?: boolean;
  /**控件大小 */
  size: SelectProps["size"];
  /**可清除 */
  allowClear?: boolean;
}
withDefaults(defineProps<Props>(), {
  allowClear: true,
});
const emit = defineEmits(["update:value"]);
const { t } = useI18n();
const options = reactive<SelectOptions>([
  { label: () => t("大数字"), value: "bigint" },
  { label: () => t("数字"), value: "int" },
  { label: () => t("浮点数"), value: "double" },
  { label: () => t("字符串"), value: "varchar" },
  { label: () => t("日期时间"), value: "datetime" },
]);
</script>
